<template>
  <div>
    用户名：<input type="text" v-model.trim="user.name">
    年龄：<input type="text" v-model.number="user.age">
  </div>
</template>

<script>
export default {
  data () {
    return {
      user:{
        name: '小明',
        age: 18
      }
    }
  },
  // watch 侦听器结构 - 侦听 data 或 computed 值的变化
  watch: {
    // user(newVal, oldVal){
    //   console.log(newVal, oldVal);
    // }
    user: {
      immediate: true,
      // 深度监听对象
      deep: true,
      // 复杂写法原本的函数写到 handler 结构中
      handler(newVal){
        console.log(newVal);
      }
    }
  }
}
</script>

<style>

</style>